<template>
  <div class="description">
    <strong>SVG可用的滤镜是：</strong>
    <br>
    feBlend - 与图像相结合的滤镜<br />
    feColorMatrix - 用于彩色滤光片转换<br />
    feComponentTransfer<br />
    feComposite<br />
    feConvolveMatrix<br />
    feDiffuseLighting<br />
    feDisplacementMap<br />
    feFlood<br />
    feGaussianBlur<br />
    feImage<br />
    feMerge<br />
    feMorphology<br />
    feOffset - 过滤阴影<br />
    feSpecularLighting<br />
    feTile<br />
    feTurbulence<br />
    feDistantLight - 用于照明过滤<br />
    fePointLight - 用于照明过滤<br />
    feSpotLight - 用于照明过滤<br />
    <br>
    Remark 除此之外，您可以在每个 SVG 元素上使用多个滤镜！
  </div>
  <ul class="svg_list">
    <li>
      <div class="tit">模糊效果 feGaussianBlur</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="f1" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
          </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
      </svg>
    </li>
    <li>
      <div class="tit">阴影 feOffset</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="f2" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
            <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
          </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
      </svg>
    </li>
    <li>
      <div class="tit">阴影 feOffset</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="f3" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
          </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
      </svg>
    </li>
    <li>
      <div class="tit">渐变 linearGradient</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <linearGradient id="grad0" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
          </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad0)" />
        <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
          SVG</text>
      </svg>
    </li>
    <li>
      <div class="tit">放射性渐变 radialGradient</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"></stop>
            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"></stop>
          </radialGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>
      </svg>
    </li>
    <li>
      <div class="tit">放射性渐变 radialGradient</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"></stop>
            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"></stop>
          </radialGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)"></ellipse>
      </svg>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const value = ref("asd");
const content3d = ref<HTMLElement>();

onMounted(() => {

});
</script>

<style lang="scss" scoped>
.svg_list {
  display: flex;
  justify-content: space-between;
  widows: 100%;
  flex-wrap: wrap;

  li {
    .tit {
      text-align: center;
      border: 1px dashed #ddd;
      width: 100%;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
    }

    width: 300px;
    min-height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &.larger {
      width: 500px;
    }
  }
}
</style>
